<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="libs/bootstrap.css">
  <script src="libs/vue.js"></script>
</head>

<body>
  <div id="app">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">
          添加品牌
        </h3>
      </div>
      <div class="panel-body form-inline">
        <label>
          Id:
          <input type="text" v-model="id" class="form-control">
        </label>
        <label>
          Name:
          <input type="text" v-model="name" class="form-control">
        </label>
        <!-- vue 中的函数，不传参时可以省略括号 -->
        <input type="button" value="添加" @click="add" class="btn btn-primary">
        <label>
          搜索名称关键字:
          <input type="text" v-model="keywords" class="form-control">
        </label>
      </div>
    </div>

    <div>
      <table class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Date</th>
            <th>Operate</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.date }}</td>
            <td>
              <a href="" @click.prevent="del(item.id)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        keywords: '',
        list: [
          { id: 1, name: '奔驰', date: new Date() },
          { id: 2, name: '宝马', date: new Date() },
        ]
      },
      created() {
        this.newList = this.list;
      },
      methods: {
        add: function () {
          this.list.push({ id: this.id, name: this.name, date: new Date() })
          this.id = this.name = null
        },
        del: function(id) {
          // this.list.forEach((item, index)=>{
          //   if (item.id == id) {
          //     this.list.splice(index, 1)
          //   }
          // })
          this.list.some((item, index)=>{
            if(item.id == id) {
              this.list.splice(index, 1)
              return true
            }
          })
        },
        // search: function(keywords) {
        //   var newList = []
        //   this.list.forEach(item=>{
        //     if (item.name.indexOf(keywords) != -1) {
        //       newList.push(item)
        //     }
        //   })
        //   return newList
        // }
        search: function(keywords) {
          return this.list.filter((item)=>{
            // if (item.name.indexOf(keywords) != -1) {
            if (item.name.includes(keywords)) {
              return true;
            }
          })
        }
      }
    })
  </script>
</body>

</html>